<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chatGpt 问答机器人 </title>
    <script src="./plugins/jquery/jquery.min.js"></script>
    <script src="./js/xj-ajax.js"></script>

    <!-- 消息模板 -->
    <script id="msgTp" type="text/html">
        <div class="message-row {isSent}">
            <div class="message-avatar">
                <img src="{avatar}">
            </div>
            <div class="message-content">
                <div class="message-header">
                    <div class="message-username {isSent}">
                        {username}
                    </div>
                    <div class="message-time {isSent}">
                        {time}
                    </div>
                </div>
                <div class="message-bubble" {isSendUser}>
                    <span>  <pre id="{id}">{content}</pre> </span>
                </div>
            </div>
        </div>
    </script>
    <script src="./js/index.js"></script>
</head>
<body>
<h1 style="text-align: center"> 微软 OpenAI 助手
    <span style="font-size: 12px;">v1.0.0 | </span>
    <span style="font-size: 12px;cursor: pointer;color: #10A37F" onclick="configParams()">配置</span>
</h1>
<!--<div style="font-size: 12px;text-align: center"><button style="background-color: #ecf5ff">展开配置</button>  </div>-->
<!-- 参数配置区 -->
<div id="configParams">
    <!-- 扩展参数 -->
    <div class="config">
        <div>gpt 版本:</div>
        <div>
            <select id="model" name="model">
                <option value="gpt-35-turbo">gpt-35-turbo</option>
                <!--  <option value="gpt-35-turbo-16k">gpt-35-turbo-16k</option>-->
                <option value="gpt-4">gpt-4</option>
                <!--  <option value="gpt-4-32k">gpt-4-32k</option>-->
                <option value="gpt-4o">gpt-4o</option>
                <option value="gpt-4o-mini">gpt-4o-mini</option>
                <option value="o1-preview">o1-preview</option>
                <option value="o1-mini">o1-mini</option>
            </select>
        </div>
    </div>
    <div class="config">
        <div>maxtokens:</div>
        <div><input id="maxTokens" value="1000"></div>
    </div>
    <div class="config">
        <div>温度:</div>
        <div>
            <select id="temperature" name="temperature">
                <option value="0.2">0.2</option>
                <option value="0.3">0.3</option>
                <option value="0.4">0.4</option>
                <option value="0.5">0.5</option>
                <option value="0.6">0.6</option>
                <option value="0.7" selected>0.7</option>
                <option value="0.8">0.8</option>
                <option value="0.9">0.9</option>
                <option value="1.0">1.0</option>
            </select>
        </div>
    </div>
    <div class="config">
        <div>连续对话:</div>
        <div>
            <select id="continuousDialogue" name="continuousDialogue">
                <option value="true" selected>开</option>
                <option value="false">关</option>
            </select>
        </div>
    </div>
    <div class="config">
        <div>流式对话:</div>
        <div>
            <select id="sseDialogue" name="sseDialogue">
                <option value="true" selected>开</option>
                <option value="false">关</option>
            </select>
        </div>
    </div>
</div>

<!--  内容展示区 -->
<div class="chat-log-card" id="msgsDiv"></div>

<!-- 输入框 -->
<textarea id="content" rows="4" placeholder="在此处输入您的问题, 点击 [发送] 或 [alt + enter] 发起对话"></textarea>
<!-- 发送按钮 -->
<button class="sendMsg" onclick="sendMsg()">
    <i class="el-icon-search"></i>
    <span style="font-size: 18px">发送</span>
</button>

<script>

    // 初始消息加载
    created();
    // 默认隐藏配置
    $("#configParams").hide();
</script>

<style scoped>

    /*::-webkit-scrollbar {*/
    /*    width: 2px;  !* 修改滚动条的宽度，设置为6px *!*/
    /*    height: 1px; !* 修改滚动条的高度，设置为6px *!*/
    /*    !*background-color: #bd3838; !* 设置滚动条的背景颜色 *!*!*/
    /*}*/

    pre {
        white-space: pre-wrap;
        margin: 0;
        line-height: 19px;
    }

    /* 输入框 */
    #content {
        margin-left: 10%;
        width: 75%;
        height: 60px;
        color: black;
        border: 1px solid #d0cbcb;
        border-radius: 5px;
        font-size: 16px;
        line-height: 30px;
    }

    /* 输入框容器 */
    /*.search-box {*/
    /*    margin-top: 20px;*/
    /*    margin-bottom: 60px;*/
    /*    width: 80%;*/
    /*    margin-left: 10%;*/
    /*    position: relative;*/
    /*}*/
    /* 输入框按钮 */
    .sendMsg {
        /*margin-left: 90%;*/
        margin-top: -58px;
        width: 80px;
        height: 60px;
        position: relative;
        right: 0;
        border-radius: 5px 5px 5px 5px;
        color: #10A37F;
        border: 1px solid #d0cbcb;
        background: #fff;
        /*top: 0;*/
        /*right: -44px;*/
        vertical-align: middle;
        box-sizing: content-box;
    }

    /* 按钮选中色 */
    .search-box button:hover {
        background-color: #19C37D;
        color: white;
    }


    .config {
        padding-top: 10px;
        height: 30px;
        /*width: 80%;*/
        /*margin-left: 10%;*/
        display: grid;
        grid-template-columns: 100px 200px;
        column-gap: 0px;
        row-gap: 0px;
        justify-content: center;
        /*padding: 0px 15px 20px 15px;*/
    }

    .config input {
        /*border: 1px solid #ccc;*/
        width: 200px;
        border-radius: 0;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        border-color: #afaca7;
        padding-left: 0.7em;
    }

    .config select {
        width: 200px;
        border-radius: 0;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        border-color: #afaca7;
        padding-left: 0.7em;
    }


    /*  聊天相关样式  */
    .chat-log-card {
        border: 1px solid #ccc;
        height: 400px;
        width: 80%;
        margin-left: 10%;
        overflow-y: scroll;
        padding: 20px;
        margin-bottom: 20px;
    }

    .message-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .is-sent .message-avatar {
        margin-left: auto;
        margin-right: 0;
    }

    .message-avatar {
        margin-right: 10px;
        margin-top: 10px;
    }

    .message-content {
        display: flex;
        flex-direction: column;
        max-width: 50%;
    }

    .message-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .message-username {
        font-weight: bold;
        margin-right: 10px;
        text-align: right;
    }

    .message-time {
        font-size: 12px;
        color: #ccc;
        text-align: right;
        margin-right: auto
    }

    .is-sent .message-username {
        text-align: right;
    }

    .is-sent .message-time {
        text-align: left;
    }


    /* 隐藏原生滚动条 */
    ::-webkit-scrollbar {
        width: 2px; /* 设置滚动条宽度 */
    }

    /* 设置滚动条轨道的样式 */
    ::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* 设置轨道的背景色 */
    }

    /* 设置滚动条滑块的样式 */
    ::-webkit-scrollbar-thumb {
        background-color: #ccc; /* 设置滑块的背景色 */
        border-radius: 3px; /* 设置滑块的圆角 */
    }

    /* 当鼠标悬停在滚动条上时，滑块的样式 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* 设置鼠标悬停时滑块的背景色 */
    }
</style>
